<template>
  <view class="official">
    <image class="official-img" :src="wx_mp_qrcode" />
    <view class="official-btn" @click="close"></view>
  </view>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useUserStore } from '@/store/modules/user'
export default {
  name: 'official',
  props: {},
  emit: ['close'],
  setup(_, { emit }) {
    const state = reactive({
      wx_mp_qrcode: '',
    })
    const close = () => {
      emit('close')
    }
    onMounted(() => {
      const { wx_mp_qrcode } = useUserStore().getField()
      state.wx_mp_qrcode = wx_mp_qrcode
    })
    return {
      ...toRefs(state),
      close,
    }
  },
}
</script>

<style lang="scss" scoped>
.official {
  position: relative;
  margin: 200rpx auto 0;
  width: 622rpx;
  height: 670rpx;
  background: url('https://images.tongzhuangkc.com/tz/popu.png') no-repeat;
  background-size: 100% 100%;
  padding-top: 350rpx;
  text-align: center;
  &-img {
    width: 302rpx;
    height: 302rpx;
  }
  .official-btn {
    width: 64rpx;
    height: 64rpx;
    background: url('https://images.tongzhuangkc.com/tz/close2x.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -80rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
